<script setup>
import {onMounted, ref} from "vue";
import errGif from '@/assets/404_images/animation.gif'
import store from "@/store";
const isConnection = ref(false);
const configInfo = ref({
  gameInfo:{},
  gameConfig:{}
})
onMounted(() => {
  getGameInfo()
})
const getGameInfo=() => {

  if (store.getters.gameConfig){
    configInfo.value.gameConfig={...store.getters.gameConfig.gameConfig};
    configInfo.value.gameInfo={...store.getters.gameConfig.gameInfo};
    configInfo.value.gameConfig.taskType=configInfo.value.gameConfig.taskType.filter(item => item.key===configInfo.value.gameInfo.taskType)
  }
}
</script>

<template>
  <div class="overview-container">
    <el-card class="picture">
      <canvas v-if="isConnection" id="canvas" width="400" height="400"></canvas>
      <img v-else :src="errGif" alt="未连接画面" ondragstart="return false;"/>
    </el-card>
    <el-divider/>
    <el-scrollbar height="100%">
      <div class="game-info-box">
        <el-card>
          <div style="text-align: center;">
            <el-button
                type="info"
                text
                bg>
              插队上号
            </el-button>
            <el-button
                v-if="configInfo.gameInfo.status===-1"
                type="info"
                text
                bg>
              账号解冻
            </el-button>
            <el-button
                v-else
                type="info"
                text
                bg>
              冻结账号
            </el-button>
            <el-button
                v-if="configInfo.gameInfo.status===1"
                type="danger"
                text
                bg>
              停止作战
            </el-button>
          </div>
        </el-card>
        <el-card>
          <div class="game-box">
            <span style="text-align: center;">游戏信息</span>
            <div>
              理智数量：
              <el-tag type="success" style="letter-spacing: 10px;">
              {{configInfo.gameInfo.sane}}/{{configInfo.gameInfo.maxSane}}
            </el-tag>
            </div>

            <div v-for="item in configInfo.gameConfig.taskType" >
              当前任务： <el-tag type="primary">{{item.value}}</el-tag>
            </div>
            <div>
              到期时间：
              <el-tag v-if="configInfo.gameInfo.expireTime" type="warning">
                {{configInfo.gameInfo.expireTime}}
              </el-tag>
              <el-tag v-else type="danger">
                已到期
              </el-tag>
            </div>
          </div>
        </el-card>
        <el-card>
          <div class="game-box">
            <span style="text-align: center;">上号信息</span>
            <div>
              插队次数：{{configInfo.priority}}
            </div>
            <div>
              排队数量：{{configInfo.priority}}
            </div>
            <div>
              账号状态：
              <el-tag v-if="configInfo.gameInfo.status===-1" type="warning">
                已冻结
              </el-tag>
              <el-tag v-else-if="configInfo.gameInfo.status===0||configInfo.gameInfo.status===2" type="primary">
                排队中
              </el-tag>
              <el-tag v-else-if="configInfo.gameInfo.status===1" type="success">
                已上号
              </el-tag>
              <el-tag v-else type="danger">
                账号异常
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>
    </el-scrollbar>

  </div>
</template>

<style scoped>
.overview-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.picture{
  height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.game-info-box .el-card {
  margin-bottom: 10px;
  text-align: left;
}
.game-box{
  height: 150px;
  width: 100%;
  display: flex;
  flex-direction: column;

  justify-content: space-around;
}

.game-box div{
  font-size: 12px;
}

el-row .el-col .el-card{
  height: 120px;
}
.game-info-box{
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
}
img {
  -webkit-user-drag: none;
  user-select: none;
}
</style>